<script setup>
import OImage from "../setting/Images.vue";
import { newRandomUid } from "@/utils";
import PrizePopupSelect from "../setting/PrizePopupSelect.vue";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  group: {
    type: Array,
    default: () => [],
  },
});

const emits = defineEmits(["update:config", "change"]),
  popupList = inject("popupList", []);

const form = ref({
  $position: { top: 0, left: 0 },
  $size: { width: 79, height: 26 },
  $positionType: "absolute",
  $removeable: true,
  linkType: "system",
  img: "./imagesStatic/activity/button_default.png",
  shareDesc: "22222",
  shareTitle: "11111",
  link: "",
  type: "invite",
  shareType: 'poster',
});

const formRef = ref();

const funcList = ref([{ label: "分享裂变（分享奖励）", key: "invite" }]);

const shareTypeList = [
  { label: "海报", key: "poster" },
  { label: "微信网页分享", key: "wechat" },
];

const rules = {
  shareType: [{ required: true, message: "请选择分享类型", trigger: "change" }],
  shareTitle: [{ required: true, message: "请填写分享标题", trigger: "blur" }],
  shareDesc: [{ required: true, message: "请填写分享描述", trigger: "blur" }],
  shareIcon: [{ required: true, message: "请上传分享图标", trigger: "change" }],
  sharePosterUid: [
    { required: true, message: "请上绑定分享海报", trigger: "change" },
  ],
};

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const sharePopup = computed(() => {
  return popupList.value.filter(
    (item) => item.type === "Popup" && item.pageConfig.type === "sharePoster"
  );
});

const onChangeFunc = () => {
  if (detail.value.shareType === "poster") {
    if (sharePopup.value.length > 0) {
      detail.value.sharePosterUid = sharePopup.value[0].uid;
    } else {
      let uid = newRandomUid();
      detail.value.sharePosterUid = uid;
      debugger
      emits("change", detail.value, {
        uid: uid,
        name: "分享海报",
        type: "Popup",
        pageConfig: {
          type: "sharePoster",
        },
      });
    }
  }
  onChange();
};

const initConfig = () => {
  detail.value.$removeable = true;
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Fission-${newRandomUid()}`;
    onChange();
  }
};

const onChange = (val) => {
  detail.value = detail.value;
};

// 表单校验
const check = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(async (valid, invalidFields) => {
      if (valid) {
        // 分享按钮是否关联海报
        if (
          detail.value.shareType === "poster" &&
          !sharePopup.value.find(
            (item) => item.uid === detail.value.sharePosterUid
          )
        ) {
          detail.value.sharePosterUid = "";
          reject(`${props.name}未关联分享海报`);
        }
        resolve();
      } else
        reject(
          `${props.name}校验未通过，${
            invalidFields[Object.keys(invalidFields)[0]][0].message
          }`
        );
    });
  });
};

onMounted(() => {
  nextTick(() => {
    initConfig();
    onChange();
  });
});

defineExpose({ check });
</script>
<template>
  <el-form
    ref="formRef"
    :model="detail"
    :rules="rules"
    :disabled="disabled"
    label-width="auto"
  >
    <PrizePopupSelect v-model="detail" :group="group" @change="onChange" />
    <el-form-item label="按钮功能:" prop="type">
      <el-select
        v-model="detail.type"
        placeholder="请选择"
        style="width: 200px"
        :disabled="true"
      >
        <template v-for="(item, key) in funcList" :key="key">
          <el-option :label="item.label" :value="item.key" />
        </template>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="分享类型:" prop="shareType">
      <el-radio-group v-model="detail.shareType" @change="onChangeFunc">
        <el-radio v-for="item in shareTypeList" :label="item.key">{{
          item.label
        }}</el-radio>
      </el-radio-group>
    </el-form-item> -->
    <template v-if="detail.shareType === 'wechat'">
      <el-form-item label="分享标题:" prop="shareTitle">
        <el-input v-model="detail.shareTitle" @input="onChange"></el-input>
      </el-form-item>
      <el-form-item label="分享描述:" prop="shareDesc">
        <el-input v-model="detail.shareDesc" @input="onChange"></el-input>
      </el-form-item>
      <el-form-item label-width="0" prop="shareIcon">
        <OImage
          v-model="detail.shareIcon"
          tips="建议尺寸：1:1（如50px*50px）"
          name="分享图标"
          @change="onChange"
        />
      </el-form-item>
    </template>
    <template v-else-if="detail.shareType === 'poster'">
      <el-form-item label="分享海报:" prop="sharePosterUid">
        <el-select
          v-model="detail.sharePosterUid"
          placeholder="请选择"
          style="width: 200px"
          @change="onChange"
        >
          <el-option
            v-for="(item, key) in sharePopup"
            :label="item.name"
            :value="item.uid"
          />
        </el-select>
      </el-form-item>
    </template>

    <OImage
      v-model="detail.img"
      v-model:size="detail.$size"
      name="按钮图片"
      @change="onChange"
    />
  </el-form>
</template>
